<template>
	<view class="">
		<view class="" :style="{height:statusBar+44+'px'}"></view>
		<view class="header-bar" :style="{paddingTop:statusBar+'px'}">
			<view @click="barClick('0')" :class="selectText == '0'?'bar-list active':'bar-list'">热门主题</view>
			<view @click="barClick('1')" :class="selectText == '1'?'bar-list active':'bar-list'">主题</view>
			<view @click="barClick('2')" :class="selectText == '2'?'bar-list active':'bar-list'">圈子管理</view>
		</view>
	</view>

</template>
<script>
	export default {
		emits: ['onSelect'],
		data() {
			return {
				selectText: "0",
				statusBar: 0,
			}
		},
		created() {
			this.statusBar = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			barClick(text) {
				this.selectText = text;
				this.$emit('onSelect', text);
			}
		}
	}
</script>
<style lang="scss">
	.header-bar {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		width: 100%;
		background: #3c96f3;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.bar-list {
			padding: 10px;
			font-size: 20px;
		}

		.active {
			font-size: 25px;
		}
	}
</style>